<template>
  <div class="page">
    <div class="fund_content">
      <div class="fund_text_content">
        <span class="text_style">{{content.title}}</span>
        <span  class="text_style">{{content.subTitle}}</span>
      </div>
      <div class="money_content">
        <span class="money_text">{{money}}</span>
        <span class="yuan_text">(金币)</span>
      </div>
    </div>

  </div>

</template>

<script>
  import {getInfo} from '@/api/fund';
  export default {
    name: 'fundComponent',
    data(){
      return{
        money:0,
        canshu:'',
      }
    },
    props:[
      'content'
    ],
    created() {
      this.loadFund()
    },
    methods:{
      loadFund(){
        getInfo().then(res=>{

          var number=Number(res.data.vip1)+Number(res.data.vip2)+Number(res.data.vip3)
            +Number(res.data.vip4)+Number(res.data.vip5)+Number(res.data.fund)+Number(res.data.atvy)
            +Number(res.data.bonus)
          var mathNumber=0
          if(number>0&&number<=100){
            mathNumber=10
          }else if(number>0&&number<=10&&number>0){
            mathNumber=4
          }else if(number>0&&number<=1000&&number>100){
            mathNumber=100
          }else if(number>0&&number<=1000000&&number>1000){
            mathNumber=1000
          }
          if(number>0){
            this.canshu=setInterval(()=>{
              this.money+=Math.ceil(Math.random()*mathNumber);
              if(this.money>=number){
                clearInterval(this.canshu)
                this.money=number
              }
            },30)
          }

        })
      },
    }
  }
</script>

<style scoped>
  .page{
  }
  .fund_content{
    padding:15px 10px 15px 10px;
    background-color: white;
    display: flex;
    flex-direction: row;
    width: 355px;
    box-sizing: border-box;
    margin-left: 10px;
    border-radius: 5px;
    box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.1);
    justify-content: space-between;
  }
  .fund_text_content{
    padding-right: 15px;
    box-sizing: border-box;
    border-right-width:1.5px;
    border-right-style:solid;
    border-right-color:rgba(0, 0, 0, 0.1)
  }
  .text_style{
    display: block;
    font-size: 14px;
    line-height: 20px;
    color: rgba(0, 0, 0, 0.7);
    text-align: center;
  }
  .money_content{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
  .money_text{
    color: #2c7c77;
    font-weight: 600;
    font-size: 22.5px;
  }
  .yuan_text{
    color: rgba(0, 0, 0, 0.7);
    font-size: 13.5px;
    /* line-height: 46px; */
    font-weight: 600;
    margin-left: 7.5px;
    margin-top: 7.5px;
  }
</style>
